<template>
  <div class="mainRight">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="热门游记" name="first">
        <main-right-item-vue
          :item="item"
          v-for="(item, i) in travelnotes"
          :key="i"
        />
      </el-tab-pane>
      <el-tab-pane label="最新发表" name="second">
        <main-right-item-vue
          :item="item"
          v-for="(item, i) in travelnotes"
          :key="i"
        />
      </el-tab-pane>
    </el-tabs>
    <div class="page">
      <el-pagination @current-change="init" :current-page="1" layout="total,prev, pager, next" :total="total" background> </el-pagination>
    </div>
    <a class="btn" href="#">写游记</a>
  </div>
</template>
<script>
import api from "@/api/home";
import MainRightItemVue from "./component/MainRightItem.vue";
import { scrollTo } from '@/utils/scroll-to'
export default {
  data() {
    return {
      activeIndex: "1",
      activeColor: "#ffb500",
      list: {},
      activeName: "first",
      travelnotes: "",
      total:0,
    };
  },
  created() {
    this.init();
  },
  components: {
    MainRightItemVue,
  },
  methods: {
    init(page=1) {
      api.getTravelnotesHotInfo({ page, limit: 10 }).then((res) => {
        console.log("item11=>", res);
        this.travelnotes = res.travelnotes;
        this.total = res.total
        res.page==1?'':scrollTo(600,800)
      });
    },
    handleSelect(index) {
      console.log(index);
    },
    handleClick(tag) {
      if (this.activeName == "first") {
        api.getTravelnotesHotInfo({ page: 1, limit: 10 }).then((res) => {
          console.log("item11=>", res);
          this.travelnotes = res.travelnotes;
        });
      } else {
        api.getTravelnotesNewInfo({ page: 1, limit: 10 }).then((res) => {
          console.log("item12=>>", res);
          this.travelnotes = res.travelnotes;
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page{text-align: right;margin-top: 20px;}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{background-color: #ff9d00;}
/deep/ .el-tabs__item.is-active{color: #ff9d00;}
/deep/ .el-tabs__active-bar{background-color: #ff9d00;height: 3px;}
/deep/.el-tabs__item{font-size: 20px;}

.mainRight{
  position: relative;
  width: 710px;
  .btn{
    position: absolute;
    right: 0;
    top: -10px;
    padding-left: 70px;
    padding-right: 45px;
    height: 40px;
    background-color: #ff9d00;
    color: #fff;
    line-height: 40px;
    border-radius: 4px;
    &::before{
      position: absolute;
      top: 7px;
    left: 39px;
      content: "";
      width: 30px;
      height: 30px;
      background-image: url('~@/assets/images/mfw_logo2.png');
     background-size: 769%;
    background-position: 4px 3px;
    }
  }
}
</style>